<template>
    <div class="container">
      <h3>商品展示组件</h3>
      <div class="goods-container">
        <product
          v-for="(item, index) in goodsList"
          :key="index"
          :item="item"
          :toDetail="toDetail"
        />
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue'
  import product from './product.vue';
  
  const props = defineProps({
    toDetail: {
      type: Boolean,
      default: false
    },
    goodsList: {
      type: Array,
      default: () => []
    }
  })
  </script>
  
  <style scoped>
  .container h3 {
    text-align: center;
    border-bottom: 2px solid red;
    margin: 0;
    height: 50px;
    line-height: 50px;
  }
  
  .goods-container {
    width: calc(100% - 16px);
    background-color: #ef1f1f;
    margin: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  </style>